<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        var html=document.querySelector("html");
        var width=html.getBoundingClientRect().width;
        html.style.fontSize=width/10+"px";
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/weui.css">
    <script src="js/swiper-3.4.2.min.js"></script>
</head>
<body>
    <div id="banner" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide"><img src="img/2.jpg" ></li>
            <li class="swiper-slide"><img src="img/1.jpg" ></li>
            <li class="swiper-slide"><img src="img/3.jpg" ></li>
            <li class="swiper-slide"><img src="img/4.jpg"></li>
        </ul>
        <div class="swiper-scrollbar"></div>
    </div>
    <div class="con">
        <div class="con-title">
            <div class="con-title-Article on">文章列表</div>
            <div class="con-title-App">功能列表</div>
        </div>
        <div class="con-main">
            <div class="con-main-Article on">
                <ul class="newsList">
                    <!--<li>-->
                        <!--<a href="#">-->
                            <!--<div class="Preview-map"><img src="img/1.jpg"></div>-->
                            <!--<div class="Preview-title">测试文章1111111111111dwdwqdwqdwqdwasasa</div>-->
                            <!--<div class="arrow"><div></div></div>-->
                        <!--</a>-->
                    <!--</li>-->


                </ul>
            </div>
            <div class="con-main-App">
                <div class="page grid js_show">
                    <div class="weui-grids">
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">个人档案</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">拍照</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">账单</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">分享</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">游戏</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">录音翻译</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">实时地图</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">图片预览</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="./img/icon_tabbar.png" alt="">
                            </div>
                            <p class="weui-grid__label">微信扫码</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
<footer>
    <div class="weui-tabbar">
        <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./img/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                    </span>
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">资源</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
            <p class="weui-tabbar__label">发现</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
            <span style="display: inline-block;position: relative;">
            <img src="./img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
            </span>
            <p class="weui-tabbar__label">我</p>

        </a>
    </div>
</footer>
</body>
<script src="js/index.js"></script>
</html>

















